// 代码生成器
<template>
  <div class="p-4 enter-y">
    <GroupCard :growCardList="items" />
    <DataFirstModal
      v-if="state.isShowDataFirst"
      @register="registerDataFirst"
      @close="handleClose('isShowDataFirst')"
    />
    <CodeFirstModal
      v-if="state.isShowCodeFirst"
      @register="registerCodeFirst"
      @close="handleClose('isShowCodeFirst')"
    />
    <SimpleTemplateModal
      v-if="state.isShowSimpleTemplate"
      @register="registerSimpleTemplate"
      @close="handleClose('isShowSimpleTemplate')"
    />
  </div>
</template>
<script lang="ts" setup>
  import { reactive } from 'vue';
  import GroupCard from './components/GroupCard.vue';
  import DataFirstModal from './components/DataFirstModal.vue';
  import CodeFirstModal from './components/CodeFirstModal.vue';
  import SimpleTemplateModal from './components/SimpleTemplateModal.vue';
  import { useModal } from '/@/components/Modal';
  import { useI18n } from '/@/hooks/web/useI18n';
  import { useRouter } from 'vue-router';
  const { t } = useI18n();
  const [registerDataFirst, { openModal: openDataFirstModal }] = useModal();
  const [registerCodeFirst, { openModal: openCodeFirstModal }] = useModal();
  const [registerSimpleTemplate, { openModal: openSimpleTemplateModal }] = useModal();
  import interfaceFirstPng from '/@/assets/images/design/interfaceFirst.png';
  import dataFirst from '/@/assets/images/design/dataFirst.png';
  import simpleTemplate from '/@/assets/images/design/simpleTemplate.png';
  import quickDevelop from '/@/assets/images/design/quickDevelop.png';
  const router = useRouter();
  const items = [
    {
      name: t('界面优先'),
      content: t('以界面为基础设计并生成单表或多表的基础功能'),
      btnName: t('设计功能'),
      image: interfaceFirstPng,
      func: () => {
        openCodeFirstModal(true, { undoAble: true });
      },
    },
    {
      name: t('数据优先'),
      content: t('以数据为基础设置生成单表或多表的基础功能'),
      btnName: t('设计功能'),
      image: dataFirst,
      func: () => {
        openDataFirstModal(true, { undoAble: true });
      },
    },
    {
      name: t('简易模板'),
      content: t('通过简单操作生成不需要考虑数据库的基础功能'),
      btnName: t('设计功能'),
      image: simpleTemplate,
      func: () => {
        openSimpleTemplateModal(true, { undoAble: true });
      },
    },
    {
      name: t('快速生成代码'),
      content: t('根据数据表结构自动快速生成功能代码'),
      btnName: t('设计功能'),
      image: quickDevelop,
      func: () => {
        router.push({ path: '/system/database' });
      },
    },
  ];

  const state = reactive({
    isShowDataFirst: true,
    isShowCodeFirst: true,
    isShowSimpleTemplate: true,
  });
  const handleClose = (modal) => {
    state[modal] = !state[modal];
    setTimeout(() => {
      state[modal] = !state[modal];
    }, 100);
  };
</script>
